<template>
  <div class="about_us">
    <!-- 导航 -->
    <div class="sub_nav">
      <div class="img">
        <el-image
          style="width:inherit;height:100%"
          :src="sub_nav_image"
          fit="cover"
        ></el-image>
        <div class="front_title">
          <p>关于我们</p>
          <p>
            传承匠心精神，用心打造好品牌
          </p>
        </div>
      </div>

      <div class="sub_title">
        <div>
          <span @click="to_sec('#anchor01')">品牌背景</span>
          <span @click="to_sec('#anchor02')">品牌形象</span>
          <span @click="to_sec('#anchor03')">品牌理念</span>
          <span @click="to_sec('#anchor04')">品牌故事</span>
        </div>
      </div>
      <transition name="ceiling_transition">
        <div v-show="sub_title_show" class="sub_title sub_title_show">
          <div>
            <span @click="to_sec('#anchor01')">品牌背景</span>
            <span @click="to_sec('#anchor02')">品牌形象</span>
            <span @click="to_sec('#anchor03')">品牌理念</span>
            <span @click="to_sec('#anchor04')">品牌故事</span>
          </div>
        </div></transition
      >
    </div>

    <!-- 品牌背景 -->
    <div id="anchor01" class="background">
      <p class="title01">品牌背景</p>
      <p class="title02">BRAND BACKGROUND</p>
      <p class="title03"></p>
      <p class="title04">
        以酱香包为代表“三两”始终坚持，“健康、美味、极致”的产品主义，不断颠覆，不断死磕，<br />
        只为让你吃上一口最地道的正宗胶东酱香包。
      </p>
      <div class="background_detail">
        <el-image
          style="width:inherit;height:445px"
          :src="companyInfo[0].background_img"
          fit="cover"
        ></el-image>
        <div class="content">
          <p>公司背景介绍</p>
          <p v-html="companyInfo[0].background_content"></p>
        </div>
      </div>
      <!-- 图片轮播 -->
      <div ref="img_position_y" class="img_container">
        <transition name="el-icon-arrow-left">
          <div
            v-if="carosel_show"
            @click="translateleft"
            class="el-icon-arrow-left"
          ></div>
        </transition>
        <transition name="el-icon-arrow-right">
          <div
            v-if="carosel_show"
            @click="translateright"
            class="el-icon-arrow-right"
          ></div>
        </transition>
        <div ref="container" class="container">
          <transition name="carousel_transition">
            <div ref="container_inner" class="container_inner">
              <el-card
                shadow="never"
                v-for="(item, index) in carousal"
                :key="index"
                :body-style="{ padding: '0px' }"
                ref="el_card_item"
                class="el_card-item"
              >
                <el-image
                  style=""
                  :src="item.img_url"
                  fit="contain"
                  class="carousal_move_item"
                ></el-image>
                <div class="el_card-item_addr">
                  {{ item.addr }}
                </div>
              </el-card>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <!-- 我们的团队 -->
    <div class="our_team">
      <div class="title">我们的团队</div>
      <div class="sub_title">
        在三两，集结了一群既有激情又专业的同事，无论是年轻的大学毕业生，或是专业的中坚力量，在认同三两的文化下不断学习
        培训、推进发展。<br />
        这支专业的团队促进三两胶东酱香包在下一步的发展和管理中不断完善自我、挑战自我。
      </div>
      <div class="team_detail">
        <div class="detail">
          <div class="detail_item">
            <div class="icon">
              <el-image :src="detail_item_icon01" fit="cover"></el-image>
            </div>
            <p class="detail_item_p1">产品研发</p>
            <p class="detail_item_p2">
              专注新产品研发和升级，保证产品的品类和品质
            </p>
          </div>
          <div class="detail_item">
            <div class="icon">
              <el-image :src="detail_item_icon02" fit="cover"></el-image>
            </div>
            <p class="detail_item_p1">营销策划</p>
            <p class="detail_item_p2">
              对品牌进行形象定位和包装，打造线上线下互动营销，增加知名度
            </p>
          </div>
          <div class="detail_item">
            <div class="icon">
              <el-image :src="detail_item_icon03" fit="cover"></el-image>
            </div>
            <p class="detail_item_p1">人员培训</p>
            <p class="detail_item_p2">提供专业的知识和技能操作培训</p>
          </div>
          <div class="detail_item">
            <div class="icon">
              <el-image :src="detail_item_icon04" fit="cover"></el-image>
            </div>
            <p class="detail_item_p1">运营支持</p>
            <p class="detail_item_p2">
              门店宣传、促销活动方案支持，提升单店经营效益
            </p>
          </div>
        </div>
        <div class="img">
          <el-image
            style="height:inherit;"
            :src="team_detail_image"
            fit="cover"
          ></el-image>
        </div>
      </div>
    </div>

    <!-- 品牌形象 -->
    <div id="anchor02" class="brand">
      <p class="title01">品牌形象</p>
      <p class="title02">BRAND IMAGE</p>
      <p class="title03"></p>
      <p class="title05">店铺vi形象</p>
      <p class="title04">
        “晨间一餐饭，从容三两人”在慌忙节奏生活中从容享受一餐<br />
        天然信赖，家庭简餐家＋厨房店面概念
      </p>
      <div class="logo01">
        <el-image
          style="height:inherit;"
          :src="brand_logo01_img"
          fit="cover"
        ></el-image>
      </div>
      <div class="materials">
        <div class="img">
          <el-image
            style="height:inherit;"
            :src="brand_logo02_img"
            fit="cover"
          ></el-image>
        </div>
        <div class="materials_show">
          <p class="materials_title01">包装物料展示</p>
          <p class="materials_title02">包材物料展示包材物料展示</p>
          <p class="materials_title03">
            选用触感天然纸张，更天然、更健康、更快捷，营造返璞归真的气质，打造家庭厨房的概念。
          </p>
          <div class="materials_show_detail">
            <span>纸杯</span>
            <span>食品袋</span>
            <span>外卖筷套</span>
            <span>外卖包装盒</span>
          </div>
        </div>
      </div>
      <div class="assistant">
        <div class="assistant_show">
          <p class="assistant_title01">包装物料展示</p>
          <p class="assistant_title02">包材物料展示包材物料展示</p>
          <p class="assistant_title03">
            选用触感天然纸张，更天然、更健康、更快捷，营造返璞归真的气质，打造家庭厨房的概念。
          </p>
          <div class="assistant_show_detail">
            <span>围裙</span>
            <span>帽子</span>
            <span>T恤</span>
            <span>胸牌</span>
          </div>
        </div>
        <div class="img">
          <el-image
            style="height:inherit;"
            :src="brand_logo03_img"
            fit="cover"
          ></el-image>
        </div>
      </div>
      <!-- <div class="logo01">
        <img src="" alt="" />
      </div> -->
    </div>

    <!-- 品牌理念 -->
    <div id="anchor03" class="idea">
      <p class="title01">品牌理念</p>
      <p class="title02">BRAND IDEA</p>
      <p class="title03"></p>
      <p class="title04">
        “三两”代表了我们对于食物和生活的态度，我们希望创造的不仅仅是美食，还有美好的生活。三两时间，一餐好食，”三两“希望<br />每个人都能和时间做朋友，即使生活再忙碌，也要好好吃饭，无论是奔波的早晨，或是忙碌的工作间隙，亦或加班宵夜时…，<br />都能静下来享受这一餐一食的美好。
      </p>
      <div class="img">
        <el-image
          style="height:inherit;"
          :src="idea_logo01_img"
          fit="cover"
        ></el-image>
      </div>
      <div class="rules">
        <div class="rules01 base">
          <p class="rules_p1"></p>
          <p class="rules_p2">对原料死磕</p>
          <p class="rules_p3">KOWTOW TO RAW MATERIALS</p>
          <div class="rules_img">
            <el-image
              style="height:inherit;border-radius:50%;"
              :src="idea_logo02_img"
              fit="cover"
            ></el-image>
          </div>
          <p class="rules_p4">所有原料全程可追溯，让你吃进的每一口都安心。</p>
          <p class="hover_show">
            刚出笼的包子热气洋溢，是最佳的赏味期，之后会随着时间的推移和温度的下降渐渐失去风味，”三两”的包子遵循“三小时”报废的售卖原则，超过3小时未售出的包子，我们将禁止销售。追求包子的[最佳赏味期]，也是对每份食材和每位食客的尊重。
          </p>
        </div>
        <div class="rules02 base">
          <p class="rules_p1"></p>
          <p class="rules_p2">手工现做现蒸</p>
          <p class="rules_p3">HAND MADE INSTANT STEAM</p>
          <div class="rules_img">
            <el-image
              style="height:inherit;border-radius:50%;"
              :src="idea_logo03_img"
              fit="cover"
            ></el-image>
          </div>
          <p class="rules_p4">我们更愿意用手作的温度，传递真实的包子味道。</p>
          <p class="hover_show">
            刚出笼的包子热气洋溢，是最佳的赏味期，之后会随着时间的推移和温度的下降渐渐失去风味，”三两”的包子遵循“三小时”报废的售卖原则，超过3小时未售出的包子，我们将禁止销售。追求包子的[最佳赏味期]，也是对每份食材和每位食客的尊重。
          </p>
        </div>
        <div class="rules01 base">
          <p class="rules_p1"></p>
          <p class="rules_p2">三小时报废原则</p>
          <p class="rules_p3">THREE HOUR SCRAP PRINCIPLE</p>
          <div class="rules_img">
            <el-image
              style="height:inherit;border-radius:50%;"
              :src="idea_logo04_img"
              fit="cover"
            ></el-image>
          </div>
          <p class="rules_p4">我们更愿意用手作的温度，传递真实的包子味道。</p>
          <p class="hover_show">
            刚出笼的包子热气洋溢，是最佳的赏味期，之后会随着时间的推移和温度的下降渐渐失去风味，”三两”的包子遵循“三小时”报废的售卖原则，超过3小时未售出的包子，我们将禁止销售。追求包子的[最佳赏味期]，也是对每份食材和每位食客的尊重。
          </p>
        </div>
        <div class="rules01 base">
          <p class="rules_p1"></p>
          <p class="rules_p2">对原料死磕</p>
          <p class="rules_p3">STRICT CRAFTSMANSHIP</p>
          <div class="rules_img">
            <el-image
              style="height:inherit;border-radius:50%;"
              :src="idea_logo05_img"
              fit="cover"
            ></el-image>
          </div>
          <p class="rules_p4">我们更愿意用手作的温度，传递真实的包子味道。</p>
          <p class="hover_show">
            刚出笼的包子热气洋溢，是最佳的赏味期，之后会随着时间的推移和温度的下降渐渐失去风味，”三两”的包子遵循“三小时”报废的售卖原则，超过3小时未售出的包子，我们将禁止销售。追求包子的[最佳赏味期]，也是对每份食材和每位食客的尊重。
          </p>
        </div>
      </div>
    </div>

    <!-- 品牌故事 -->
    <div id="anchor04" class="story">
      <p class="title01">品牌故事</p>
      <p class="title02">BRAND STORY</p>
      <p class="title03"></p>
      <p class="title04">
        一想到包子，就觉得是很温暖的食物，热气腾腾，让人心生暖意,
        虽然看似简单平凡
        ,却最能撩拨人心，特别是热爱面食的胶东人，一定对包子有种特别的情愫，儿时的胶东大包,面皮自然而暄软,
        内馅通常是蔬菜和肉的结合,
        还会加入胶东特有的大酱,，那混合了质朴麦香、浓郁酱香、熟肉芬芳的包子，是我们记忆深处的眷恋。
      </p>
      <div class="story_img">
        <el-image
          style="height:inherit;"
          :src="story_logo01_img"
          fit="cover"
        ></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchBanner, fetchStore, getCompany } from "../api/api";
export default {
  name: "about_us",
  data() {
    return {
      companyInfo: "",
      params: {
        type: "banner"
      },
      carosel_show: false,
      move_distance: 0,
      sub_title_show: false,
      carousal: [],
      sub_nav_image: require("../assets/aboutus/image/组1.jpg"),

      background_image: require("../assets/aboutus/image/组3.jpg"),

      detail_item_icon01: require("../assets/aboutus/icon/组9.png"),
      detail_item_icon02: require("../assets/aboutus/icon/组10.png"),
      detail_item_icon03: require("../assets/aboutus/icon/组11.png"),
      detail_item_icon04: require("../assets/aboutus/icon/组12.png"),

      team_detail_image: require("../assets/aboutus/image/组13.jpg"),

      brand_logo01_img: require("../assets/aboutus/image/组14.jpg"),
      brand_logo02_img: require("../assets/aboutus/image/组15.jpg"),
      brand_logo03_img: require("../assets/aboutus/image/组16.jpg"),

      idea_logo01_img: require("../assets/aboutus/image/组17.jpg"),
      idea_logo02_img: require("../assets/aboutus/image/组18.jpg"),
      idea_logo03_img: require("../assets/aboutus/image/组19.jpg"),
      idea_logo04_img: require("../assets/aboutus/image/组20.jpg"),
      idea_logo05_img: require("../assets/aboutus/image/组21.jpg"),

      story_logo01_img: require("../assets/aboutus/image/组22.jpg")
    };
  },
  created() {
    this.getCompanyInfo();
    this.getStore();
    this.getBanner();
    window.addEventListener("scroll", this.scroll_listener, true);
  },
  mounted() {
    this.initScroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll_listener, true);
  },
  methods: {
    // 获取公司信息
    getCompanyInfo() {
      getCompany().then(res => {
        this.companyInfo = res.data.results;
      });
    },
    // 获取门店
    getStore() {
      fetchStore().then(res => {
        this.carousal = res.data.results;
      });
    },
    // 获取banner
    getBanner() {
      fetchBanner(this.params).then(res => {
        // eslint-disable-next-line no-console
        console.log(res);
      });
    },
    // mounted初始化scroll
    initScroll() {
      document.documentElement.scrollTop = 0;
    },
    // 滚动事件检测
    scroll_listener() {
      let scrolled_distance = document.documentElement.scrollTop;
      if (scrolled_distance >= 40) {
        this.show = false;
        // eslint-disable-next-line no-console
        // console.log(scrolled_distance);
      } else {
        this.show = true;
        this.sub_show = true;
      }
      if (scrolled_distance >= 440) {
        this.sub_show = false;
        this.sub_title_show = true;
      } else {
        this.sub_show = true;
        this.sub_title_show = false;
      }
      // 轮播图左右按钮的显隐
      let temp = this.$refs.img_position_y.offsetTop;
      // eslint-disable-next-line no-console
      console.log(temp, scrolled_distance);
      if (scrolled_distance >= temp - 600 && scrolled_distance <= temp) {
        this.carosel_show = true;
      } else {
        this.carosel_show = false;
      }
    },
    to_sec(selector) {
      let anchor = this.$el.querySelector(`${selector}`);

      // eslint-disable-next-line no-console
      // console.log(anchor);
      // 获取该元素的距顶部的距离
      let total = anchor.offsetTop - 100;

      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      // 获取当前滚动条与窗体顶部的距离
      let distance =
        document.documentElement.scrollTop || document.body.scrollTop;
      let step = total / 50;
      function smoothDown() {
        if (distance < total) {
          distance += step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothDown, 1);
        } else {
          window.clearInterval(timeout);
          // 限制滚动停止时的距离
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
      let timeout = window.setInterval(smoothDown, 100);
    },
    // 轮播图右
    translateright() {
      // let temp_obj = this.carousal.pop();
      // this.carousal.unshift(temp_obj);

      this.move_distance -= 1200;
      if (
        this.move_distance <
        (Math.ceil(this.carousal.length / 3) - 1) * -1200
      ) {
        this.move_distance = 0;
      }
      this.$refs.container_inner.style.transform = `translateX(${this.move_distance}px)`;
    },
    // 轮播图左
    translateleft() {
      // let temp_obj = this.carousal.shift();
      // this.carousal.push(temp_obj);
      this.move_distance += 1200;

      if (this.move_distance > 0) {
        this.move_distance = (Math.ceil(this.carousal.length / 3) - 1) * -1200;
      }
      this.$refs.container_inner.style.transform = `translateX(${this.move_distance}px)`;
    }
  }
};
</script>

<style lang="less" scoped>
.about_us {
  .sub_nav {
    width: 100%;
    height: fit-content;

    .img {
      position: relative;
      background: greenyellow;
      width: 100%;
      height: 300px;

      .front_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: front_title 2s;
        cursor: default;

        @keyframes front_title {
          from {
            opacity: 0;
            transform: translate(-50%, 50%);
          }
        }

        p {
          color: #ffffff;
          margin: 0;
          text-align: center;

          &:first-child {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 23px;
          }
          &:last-child {
            font-size: 16px;
            font-weight: 400;
          }
        }
      }
    }

    .sub_title {
      background: #f5f5f5;
      padding: 10px 0;

      div {
        margin: auto;
        display: flex;
        // max-width: 1200px;
        width: fit-content;

        span {
          position: relative;
          box-sizing: border-box;
          display: block;
          width: 130px;
          height: 38px;
          line-height: 38px;
          margin-right: 67px;
          text-align: center;
          z-index: 0;
          cursor: pointer;
          transition: all 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 38px;
            opacity: 0;
            background: hsl(#e53832, 100%, 100%);
            transform: scaleX(0);
            z-index: -1;
            transition: all 0.3s;
          }

          &:hover {
            background: transparent;
            color: #ffffff;

            &::before {
              opacity: 1;
              transform: scaleX(1);
            }
          }
        }
      }
    }
    .sub_title_show {
      position: fixed;
      width: 100%;
      top: 0;
      transform: translate(0, 0);
      background: #f5f5f5;
      padding: 10px 0;
      z-index: 1000;
      box-shadow: 0 2px 10px 2px hsl(#222222, 100%, 100%);
      transition: all 1s;

      &.ceiling_transition-enter,
      &.ceiling_transition-leave-to {
        transform: translate(0, -100%);
        transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
      }

      div {
        margin: auto;
        display: flex;
        max-width: 1200px;
        width: fit-content;

        span {
          position: relative;
          box-sizing: border-box;
          display: block;
          width: 130px;
          height: 38px;
          line-height: 38px;
          margin-right: 67px;
          text-align: center;
          z-index: 0;
          cursor: pointer;
          transition: all 0.3s;

          &:last-child {
            margin-right: 0;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 38px;
            opacity: 0;
            background: hsl(#e53832, 100%, 100%);
            transform: scaleX(0);
            z-index: -1;
            transition: all 0.3s;
          }

          &:hover {
            background: transparent;
            color: #ffffff;

            &::before {
              opacity: 1;
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }

  .background {
    max-width: 1200px;
    margin: auto;
    margin-top: 57px;
    p {
      cursor: default;
    }
    .title01 {
      margin: 0;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 17px;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 20px;
    }
    .title04 {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 29px;
    }
    .background_detail {
      display: flex;
      margin-top: 34px;

      .img {
        width: 719px;
        height: 445px;
        background: blueviolet;
      }
      .content {
        box-sizing: border-box;
        max-width: 481px;
        height: 445px;
        background: #e53832;
        padding: 64px 62px 0 57px;
        transition: all 0.3s;

        p {
          color: #ffffff;

          &:first-child {
            width: 189px;
            height: 46px;
            border: 1px solid #ffffff;
            font-size: 26px;
            font-weight: 400;
            line-height: 46px;
            text-align: center;
          }

          &:last-child {
            font-size: 16px;
            font-weight: 400;
            line-height: 28px;
          }
        }
      }
    }

    .img_container {
      position: relative;
      margin-bottom: 64px;
      .el-icon-arrow-left {
        position: absolute;
        z-index: 1;
        top: 35%;
        left: 70px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        border-radius: 50%;
        background: #e53832;
        color: #ffffff;
        font-size: 20px;
        transform: translateX(-120%);
        opacity: 1;
        cursor: pointer;
        box-shadow: 0 0 10px 0px hsl(#e5383273, 100%, 41%);
        animation: arrpw_right_effect 4s infinite;
        animation-delay: 3s;

        transition: all 1s;

        &.el-icon-arrow-left-enter,
        &.el-icon-arrow-left-leave-to {
          opacity: 0;
          transform: translateX(0);
          transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
        }

        @keyframes arrpw_right_effect {
          from {
            box-shadow: 0 0 10px 10px hsl(#e53832, 100%, 41%);
          }
        }

        &:hover {
          background: transparent;
          box-shadow: transparent;
          animation: none;
        }
      }
      .el-icon-arrow-right {
        position: absolute;
        z-index: 1;
        top: 35%;
        right: 70px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        border-radius: 50%;
        background: #e53832;
        color: #ffffff;
        font-size: 20px;
        transform: translateX(120%);
        opacity: 1;
        cursor: pointer;
        box-shadow: 0 0 10px 0px hsl(#e5383273, 100%, 41%);
        animation: arrpw_right_effect 4s infinite;
        animation-delay: 3s;
        transition: all 1s;

        &.el-icon-arrow-right-enter,
        &.el-icon-arrow-right-leave-to {
          opacity: 0;
          transform: translateX(0);
          transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
        }

        @keyframes arrpw_right_effect {
          from {
            box-shadow: 0 0 10px 10px hsl(#e53832, 100%, 41%);
          }
        }

        &:hover {
          background: transparent;
          box-shadow: transparent;
          animation: none;
        }
      }

      .container {
        overflow: hidden;
        max-width: 1200px;
        height: 305px;
        margin-top: 36px;

        .carousel_transition-enter-active {
          transition: all 0.3s ease;
        }
        .carousel_transition-leave-active {
          transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
        }
        .carousel_transition-enter,
        .carousel_transition-leave-to {
          // transform: translateX(10px);
          opacity: 0;
        }

        .container_inner {
          display: flex;
          flex-wrap: nowrap;
          width: fit-content;
          height: fit-content;
          transition: all 1.4s ease-in-out;

          .el_card-item {
            transition: all 1s;
            display: inline-block;
            flex-shrink: 0; // 项目不缩放撑至一行
            width: fit-content;
            border: 0;
            border-radius: 0;
            margin-right: 33px;

            &:nth-child(3n) {
              margin-right: 0;
            }

            .carousal_move_item {
              width: 378px;
              height: 235px;
              transition: all 1s;
              display: inline-block;
              margin-right: 0px;
            }

            div {
              // margin-top: 21px;
              text-align: center;
              font-size: 18px;
              font-weight: 400;
              cursor: default;
            }
          }
        }
      }
    }
  }

  .our_team {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;

    .title {
      display: block;
      box-sizing: border-box;
      margin: 0;
      margin-top: 30px;
      width: 189px;
      padding: 11px 28px 10px 29px;
      font-size: 26px;
      font-weight: 500;
      border: 1px solid #231815;
      cursor: default;
    }
    .sub_title {
      margin-top: 35px;
      font-size: 16px;
      font-weight: 400;
      line-height: 28px;
      text-align: center;
      cursor: default;
    }
    .team_detail {
      max-width: 1200px;
      height: 441px;
      display: flex;
      background: #ffffff;
      margin-bottom: 30px;
      margin-top: 41px;
      .detail {
        max-width: 579px;
        display: flex;
        flex-wrap: wrap;
        padding: 51px 0 50px 54px;

        .detail_item {
          width: 206px;
          margin-right: 61px;

          &:nth-child(2n + 2) {
            margin-right: 0;
          }
          &:nth-child(3) {
            margin-top: 34px;
          }
          &:nth-child(4) {
            margin-top: 34px;
          }

          .icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: transparent;
          }

          .detail_item_p1 {
            margin: 0;
            margin-top: 15px;
            font-size: 20px;
            font-weight: 500;
            cursor: default;
          }
          .detail_item_p2 {
            margin: 0;
            margin-top: 18px;
            font-size: 16px;
            font-weight: 400;
            cursor: default;
          }
        }
      }
      .img {
        width: 622px;
        height: inherit;
        background: red;
      }
    }
  }

  .brand {
    .title01 {
      margin: 0;
      margin-top: 66px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
      cursor: default;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 17px;
      cursor: default;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 20px;
      cursor: default;
    }
    .title04 {
      margin: 0;
      line-height: 28px;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 29px;
      cursor: default;
    }
    .title05 {
      display: block;
      box-sizing: border-box;
      margin: auto;
      margin-top: 30px;
      width: 189px;
      padding: 11px 28px 10px 29px;
      font-size: 26px;
      font-weight: 500;
      border: 1px solid #231815;
      cursor: default;
    }
    .logo01 {
      margin: auto;
      max-width: 1200px;
      height: 259px;
      background: red;
      margin-top: 34px;
    }
    .materials {
      margin: auto;
      margin-top: 35px;
      max-width: 1200px;
      display: flex;
      justify-content: space-between;

      .img {
        width: 658px;
        height: 390px;
        background: red;
      }

      .materials_show {
        max-width: 415px;
        text-align: left;

        .materials_title01 {
          margin: 0;
          margin-top: 111px;
          border: 1px solid #231815;
          width: fit-content;
          font-size: 26px;
          font-weight: 500;
          padding: 10px 17px 10px 18px;
          cursor: default;
        }
        .materials_title02 {
          margin: 0;
          margin-top: 44px;
          font-size: 20px;
          font-weight: 400;
          cursor: default;
        }
        .materials_title03 {
          margin: 0;
          margin-top: 29px;
          font-size: 16px;
          font-weight: 400;
          cursor: default;
        }
        .materials_show_detail {
          margin: 0;
          margin-top: 37px;
          display: flex;

          span {
            display: block;
            width: 79px;
            height: 33px;
            line-height: 33px;
            font-size: 18px;
            font-weight: 400;
            text-align: center;
            background: #b5b5b5;
            color: #ffffff;
            margin-right: 12px;
            border-radius: 5px;
            cursor: default;

            &:last-child {
              width: 100px;
              margin-right: 0;
            }
          }
        }
      }
    }
    .assistant {
      margin: auto;
      margin-top: 35px;
      max-width: 1200px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 65px;

      .img {
        width: 658px;
        height: 390px;
        background: red;
      }

      .assistant_show {
        max-width: 415px;
        text-align: left;

        .assistant_title01 {
          margin: 0;
          margin-top: 111px;
          border: 1px solid #231815;
          width: fit-content;
          font-size: 26px;
          font-weight: 500;
          padding: 10px 17px 10px 18px;
          cursor: default;
        }
        .assistant_title02 {
          margin: 0;
          margin-top: 44px;
          font-size: 20px;
          font-weight: 400;
          cursor: default;
        }
        .assistant_title03 {
          margin: 0;
          margin-top: 29px;
          font-size: 16px;
          font-weight: 400;
          cursor: default;
        }
        .assistant_show_detail {
          margin: 0;
          margin-top: 37px;
          display: flex;

          span {
            display: block;
            width: 79px;
            height: 33px;
            line-height: 33px;
            font-size: 18px;
            font-weight: 400;
            text-align: center;
            background: #b5b5b5;
            color: #ffffff;
            margin-right: 12px;
            border-radius: 5px;
            cursor: default;
          }
        }
      }
    }
  }

  .idea {
    // position: relative;
    background: #f5f5f5;
    padding: 1px 0 0 0;

    .title01 {
      margin: 0;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
      margin-top: 28px;
      cursor: default;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 17px;
      cursor: default;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 20px;
      cursor: default;
    }
    .title04 {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 29px;
      cursor: default;
    }
    .img {
      margin: auto;
      max-width: 1200px;
      height: 315px;
      background: rgb(113, 90, 179);
      margin-top: 35px;
    }
    .rules {
      display: flex;
      width: fit-content;
      margin: 0 auto;
      margin-top: -60px;

      .base {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 241px;
        height: 421px;
        background: #db392b;
        margin-right: 42px;
        margin-bottom: 30px;
        z-index: 999;
        overflow: hidden;
        box-shadow: 0 0 0 10px transparent;
        animation: effect 2s infinite;

        @keyframes effect {
          from {
            box-shadow: 0 0 0 0 hsl(#e83929, 100%, 41%);
          }
        }

        .rules_p1 {
          margin: 0;
          margin-top: 37px;
          width: 34px;
          height: 5px;
          background: #fff;
          cursor: default;
        }

        .rules_p2 {
          margin: 0;
          margin-top: 29px;
          font-size: 20px;
          font-weight: 500;
          color: #fff;
          cursor: default;
        }

        .rules_p3 {
          margin: 0;
          margin-top: 21px;
          font-size: 14px;
          font-weight: 300;
          color: #fff;
          cursor: default;
        }

        .rules_img {
          margin: 0;
          margin-top: 29px;
          width: 142px;
          height: 142px;
          border-radius: 50%;
          background: #000;
          transition: all 0.3s;
        }

        .rules_p4 {
          margin: 0;
          margin-top: 33px;
          width: 196px;
          line-height: 28px;
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          text-align: center;
          cursor: default;
          transition: all 0.3s;
        }
        .hover_show {
          cursor: default;
          position: absolute;
          top: 70%;
          left: 50%;
          transform: translate(-50%, 62%);
          width: 196px;
          height: 237px;
          line-height: 27px;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          background: transparent;
          transition: all 0.3s;
          box-shadow: 0 0 50px 30px hsl(#b22519, 100%, 41%);
        }

        &:hover {
          transition: all 0.3s;
          background: #b22519;

          .rules_img,
          .rules_p4 {
            opacity: 0;
          }

          .hover_show {
            transform: translate(-50%, -60%);
            background: #b22519;
          }
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .story {
    margin-top: 65px;

    .title01 {
      margin: 0;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }
    .title02 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #231815;
      text-align: center;
      margin-top: 20px;
    }
    .title03 {
      width: 36px;
      height: 2px;
      background: #2f2d2c;
      margin: auto;
      margin-top: 17px;
    }
    .title04 {
      width: 936px;
      line-height: 28px;
      margin: auto;
      font-size: 16px;
      font-weight: 400;
      color: #4c4948;
      text-align: center;
      margin-top: 33px;
      margin-bottom: 34px;
    }
    .story_img {
      margin: auto;
      width: 1200px;
      height: 372px;
      background: red;
    }
  }
}
</style>
